<template>
  <div style="padding-top: 5em; margin-top:5px">
    <div class="banner">
      <div class="search-navigation">
        <div class="ui left aligned container adaptive-bar">
          <h1 class="title-text">
            1
          </h1>
        </div>
      </div>
    </div>
    <div class="ui attached menu">
      <div class="ui container adaptive-bar">
        <a class="item">
          <i class="home icon"></i> 经常访问
        </a>
        <a class="item">
          <i class="grid layout icon"></i> 在校
        </a>
        <a class="item">
          <i class="mail icon"></i> 重要
        </a>
        <a class="item">
          <i class="mail icon"></i> 设置
        </a>
        <div class="right item">
          <div class="ui simple dropdown item">
            <i class="cog icon"></i>
            <div class="menu">
              <a class="item"><i class="edit icon"></i> Edit Profile</a>
              <a class="item"><i class="globe icon"></i> Choose Language</a>
              <a class="item"><i class="settings icon"></i> Account Settings</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ui container layout-content">
      <div class="ui stackable grid" style="margin:0">
        <div class="column sixteen wide computer sixteen wide mobile" style="backgournd-color:	#FF6A6A">
          <div class="ui stackable grid">
            <div class="column twelve wide computer sixteen wide mobile">
              <div class="ui stackable grid">
                <div class="column six wide computer six wide tablet only print hidden">
                  <sui-accordion exclusive styled>
                    <sui-accordion-title active>
                      <h2 class="ui header">搜索筛选</h2>
                    </sui-accordion-title>
                    <sui-accordion-content active>
                      <sui-form>
                        <sui-form-field>
                          <label>First Name</label>
                          <input placeholder="First Name">
                        </sui-form-field>
                        <sui-form-field>
                          <label>Last Name</label>
                          <input placeholder="Last Name">
                        </sui-form-field>
                        <sui-form-field>
                          <label>Maiden Name</label>
                          <input placeholder="Maiden Name">
                        </sui-form-field>
                        <sui-button type="submit">Submit</sui-button>
                      </sui-form>
                    </sui-accordion-content>
                  </sui-accordion>
                </div>
                <div class="column ten wide computer ten wide tablet sixteen wide mobile" id="search-list-layout">
                  <div class="content" id="content">
                    <div class="ui segment raised news" id="latest-news">
                      <div class="timeline">
                        <div class="stream-container">
                          <div class="stream">
                            <ol class="stream-items ui stackable grid" style="list-style:none; padding: 0px;">
                              <li class="row">
                                <div class="stream-bar stream-item">
                                  <span>搜索结果</span>
                                </div>
                              </li>
                              <li class="row" v-for="n in 3" :key="n" @click="shower">
                                <div class="stream-item">
                                  <div class="ui fluid card stream-item-card">
                                    <div class="stream-item-card-avatar">
                                      <sui-image circular :src="`${baseUrl}elliot.jpg`" />
                                    </div>
                                    <div class="content" style="border:none">
                                      <div class="header">Project Timeline</div>
                                      <div class="meta">Friend</div>
                                      <div class="description">
                                        Elliot Fu is a film-maker from New York.
                                        <div class="other-container">
                                          <sui-image shape="rounded" :src="img" size="small" style="border-radius: 0%;height: 100%; width: 100%;" />
                                        </div>
                                      </div>
                                    </div>
                                    <sui-card-content extra class="stream-item-footer">
                                      <div class="action-list">
                                        <div class="action">
                                          <sui-button icon="settings" class="action-icon" />
                                          <sui-button icon="settings" class="action-icon" />
                                          <sui-button icon="settings" class="action-icon" />
                                          <sui-button icon="settings" class="action-icon" />
                                        </div>
                                      </div>
                                    </sui-card-content>
                                  </div>
                                </div>
                              </li>
                            </ol>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="column four wide computer only print hidden">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "search",
  data() {
    return {
      baseUrl: process.env.BASE_URL,
      img: require("@/assets/images/elliot.jpg")
    };
  },
  methods: {
    shower() {
      // console.log("显示");
    }
  }
};
</script>
<style lang="less" scoped>
.search-navigation {
  background-color: #59666c;
  padding: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.title-text {
  color: #fff;
  font-size: 27px;
  font-weight: bold;
  line-height: 32px;
  overflow: hidden;
  padding-left: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui.menu .item > i.icon {
  display: none;
  @media (min-width: 992px) {
    display: block;
  }
}
.ui.menu > .adaptive-bar {
  justify-content: space-around;
  @media (min-width: 992px) {
    justify-content: normal;
  }
}
.ui.menu > .adaptive-bar > .item {
  padding: 0 0;
  @media (min-width: 992px) {
    padding: 0.1em 2em;
  }
}
.ui.menu > .adaptive-bar > .right.item {
  display: none;
  @media (min-width: 992px) {
    display: block;
  }
}
.layout-content {
  background-color: rgb(255, 255, 255);
  flex: auto;
  min-height: 0;
  margin: 0 auto;
}
.ui.card > .content,
.ui.cards > .card > .content {
  background-size: 100%;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-position: 0 50%;
  width: 100%;
  padding: 0;
  margin-top: -1px;
}
.ui.right.floated.image,
.ui.right.floated.images {
  background-color: #fff;
  border-radius: 50%;
  margin: -25px 8px 0 0;
  padding: 1px;
  vertical-align: bottom;
  display: inline-block !important;
  max-width: 100%;
}
.ui.card .content img,
.ui.cards > .card .content img {
  border-radius: 50%;
  height: 72px;
  width: 72px;
  border: 2px solid #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
}
.stream-item {
  border-bottom: 1px solid #e6ecf0;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  align-content: baseline;
  padding: 9px 12px;
}
.stream-item:hover {
  background-color: #f5f8fa;
}
.stream-item-card {
  text-align: left;
  margin: 0px;
  list-style: none;
  box-shadow: none;
  margin-left: 58px;
  background: none;
  padding-top: 0px;
  padding-bottom: 0px;
}
.stream-item-card-avatar {
  width: 50px;
  float: left;
  margin-top: 3px;
  margin-left: -58px;
  position: absolute;
}
.ui.card > .content.stream-item-footer {
  display: table;
  width: 100%;
  font-size: 12px;
  padding-top: 1px;
  height: 30px;
}
.ui.card > .content.stream-item-footer > .action-list {
  font-size: 0;
  height: 18px;
  line-height: 1;
  margin-bottom: 2px;
  margin-top: 10px;
}
.ui.card > .content.stream-item-footer > .action-list > .action {
  display: inline-block;
}
.ui.card > .content.stream-item-footer > .action-list > .action > .action-icon {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  position: relative;
  @media (min-width: 768px) {
    margin-right: 50px;
  }
  margin-right: 40px;
}
.stream .row {
  cursor: pointer;
  padding: 0 !important;
}
.ui.raised.segment,
.ui.raised.segments {
  @media (min-width: 768px) {
    border: 1px solid rgba(34, 36, 38, 0.15);
    box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12),
      0 2px 10px 0 rgba(34, 36, 38, 0.15);
  }
  border: none;
  box-shadow: none;
}
#search-list-layout {
  padding: 0 !important;
  @media (min-width: 768px) {
    padding: 1em 0 !important;
  }
}
</style>
